<html>
    <head>
        <title><g:message code="appname"/></title>
        <meta name="layout" content="main" />
        <script type="text/javascript">
		   function showSpinner() {
		      $('spinner').show();
		   }
		   function hideSpinner() {
		      $('spinner').hide();
		   }
		   Ajax.Responders.register({
		      onLoading: function() {
		         showSpinner();
		      },
		      onComplete: function() {     
		         if(!Ajax.activeRequestCount) hideSpinner();
		      }
		   });
		</script>
        <script type="text/javascript">
        	var selectedStation;
        	function loadPollutantsInfo() {
            	pollutantData = new Object();
            	var pollutantItem;
            	<g:each var="pollutant" in="${pollutantData.entrySet()}">
            		pollutantItem = new Object();
            		pollutantItem["warningLevel"] = ${pollutant.value.warningLevel};
            		pollutantItem["riskLevel"] = ${pollutant.value.riskLevel};
            		pollutantItem["units"] = "${pollutant.value.units}";
            		pollutantData["${pollutant.key}"] = pollutantItem;
            	</g:each>
            	return pollutantData;
            }
        	var pollutantData = loadPollutantsInfo();
        	function updateHistoricData(e) {
        		var dataList = eval("("+e.responseText+")") // evaluate the JSON
        		selectedStation["data"] = dataList;
        		$('visOuter').show();
        		updateVisualization();
            }
        	function selectStationPollutant(stationId, stationName, pollutant) {
            	selectedStation = new Object();
            	selectedStation.id = stationId;
            	selectedStation.stationName = stationName;
            	selectedStation.pollutant = pollutant;
            	return false;
            }
        	function addStations() {
				var markers = new Object();
				var marker;
				var infowindow = new google.maps.InfoWindow({
						content: "holding..."
					});
	    		<g:each var="station" in="${stationList}">
	        		marker = new google.maps.Marker({
	            		position: new google.maps.LatLng(${station.latitude},${station.longitude}),
	        			title: "${station.name}",
	        			map: map,
	        			html: "<div><span style='font-weight:bold'>${station.name}</span><br/><div style='margin-left: 1em'><ul>"
		        			<g:each var="measure" in="${dataList[station.id.toString()]}">
		        				+ "<li>"
		        				+ "<span class='pollutant'>${measure.pollutant}:</span> <span class='value ${measureCodes[measure.level]}'>${measure.value}</span> <span>${pollutantData[measure.pollutant]?.units}</span>"
		        				+ "<a href=\"#\" onclick=\"selectStationPollutant('${station.id}','${station.name}','${measure.pollutant}');new Ajax.Request('/contaminame/data/lastDataFromStation',{asynchronous:true,evalScripts:true,onSuccess:function(e){updateHistoricData(e)},parameters:'stationId=${station.id}&pollutant=${measure.pollutant}'});return false;\"> <img src=\"${resource(dir:'images/icons',file:'diagram.png')}\" width=\"16\" style=\"cursor:pointer\"></img> </a>"
		        				+ "</li>"
		        			</g:each>
		        			 + "</ul></div></div>",
		        		icon: stationIcons[${stationsLevelInfo[station.id]}]
	            	});
	            	markers["${station.name}"] = marker;
	            	google.maps.event.addListener(markers["${station.name}"], 'click', function() {
		            	infowindow.setContent(this.html);
						infowindow.open(map,this);
			        });
	        	</g:each>
        	}
        </script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        
        var warningValue = pollutantData[selectedStation.pollutant].warningLevel;
        var riskValue = pollutantData[selectedStation.pollutant].riskLevel;
        data.addColumn('string', 'x');
        data.addColumn('number', 'Warning');
        data.addColumn('number', 'Risk');
        data.addColumn('number', selectedStation.pollutant);
        for (var i = 0; i < selectedStation.data.length; i++) {
        	data.addRow([selectedStation.data[i].dateTime, warningValue, riskValue, selectedStation.data[i].value]);
        }
       
        // Create and draw the visualization.
        new google.visualization.LineChart(document.getElementById('visualization')).
            draw(data, 
                 {curveType: "function",
                  width: 840, height: 180,
                  colors: ['#ef9e0b', '#a5211a', '#43588E'],
                  title: selectedStation.pollutant + " @ " + selectedStation.stationName,
                  chartArea: { width: "75%"}
                 }
                );
      }

      function updateVisualization() {
          drawVisualization();
      }
      
    </script>
    </head>
    
    <body>
    	<div id="visOuter" style="position: absolute; bottom: 0pt; width: 100%; height: 20%; min-height: 200px; z-index: 2000; background-color: transparent; margin-bottom: 10px; display:none">
    		<div style="width:80%;min-width:840px;height:180px;background-color:white;margin:0 auto; padding: 5px 10px; -moz-border-radius: 15px; -webkit-border-radius:15px">
    			<img src="${resource(dir:'images/icons',file:'close.png')}" width="16" onclick="$('visOuter').hide()" style="float:right;cursor:pointer"></img>
        		<div id="visualization" style="z-index:2000;width: 95%; height: 180px; "></div>
        	</div>
        </div>
       	<div id="mapcanvas" style="width:100%;height:100%;"></div>
       	<div id="appNameOuter" style="position:absolute;top:0;width:100%;height:100px;z-index: 1000;background-color: transparent">
       		<div id="appName" 
       			style="width:80%;min-width:840px;height:95px;margin:0 auto;text-align:center">
       			<img alt="logoContaminame" src="${resource(dir:'images/icons',file:'contaminame.png')}"
       				style="width: 582px;"/>
       			<g:link url="http://www.abredatos.es">
       				<img src="http://www.abredatos.es/wp-content/themes/abredatos/images/layout/logo_2011.png" height="90px"/>
       			</g:link>
       		</div>
       	</div>
       	<div id="infoOuter" 
       		style="position:absolute;bottom:0;width:100%;height:20%;min-height:200px;z-index: 1000;background-color: transparent;margin-bottom:10px">
       		<div id="info" 
       			style="width:80%;min-width:840px;height:180px;background-color:white;margin:0 auto; padding: 5px 10px; -moz-border-radius: 15px; -webkit-border-radius:15px">
       			<div id="infoOrigin" class="column">
       				<h1><g:message code="info.origin.head"/></h1>
       				<p><g:message code="info.origin.content"/></p>
       				<p><g:message code="info.origin.fuente"/>: 
       					<g:link url="http://www.gobiernodecanarias.org/cmayot/medioambiente/calidadambiental/calidaddelaire/index.html">
       						<g:message code="info.origin.fuente.link"/>
       					</g:link>
       				</p>
       				<p><g:message code="project"/>
       					<g:link url="http://www.abredatos.es">
       						Abredatos
       					</g:link>
       				</p>
       			</div>
       			<div id="infoWhat" class="column center">
       				<h1><g:message code="info.what.head"/></h1>
       				<p><g:message code="info.what.content1"/></p>
       				<p><g:message code="info.what.content2"/></p>
       			</div>
       			<div id="infoTeam" class="column">
       				<h1><g:message code="info.team.head"/></h1>
       				<p><g:message code="info.team.content"/></p>
       				<ul>
       					<li><g:link url="http://twitter.com/chozero"><g:message code="info.team.tana"/></g:link></li>
       					<li><g:link url="http://twitter.com/yurenaghm"><g:message code="info.team.yuyu"/></g:link></li>
       					<li><g:link url="http://twitter.com/titeroygatra"><g:message code="info.team.yeray"/></g:link></li>
       					<li><g:link url="http://twitter.com/raulbarrosoleon"><g:message code="info.team.raul"/></g:link></li>
       				</ul>
       			</div>
       			<div id="legend" class="legend">
       			<table>
       				<tr>
       				<td><img alt="Violet" src="${resource(dir:'images/icons',file:'violet.png')}"/></td><td>-><g:message code="pollution.unknown"/></td>
					<td><img alt="Green" src="${resource(dir:'images/icons',file:'green.png')}"/></td><td>-><g:message code="pollution.ok"/></td>
       			    <td><img alt="Orange" src="${resource(dir:'images/icons',file:'orange.png')}"/></td><td>-><g:message code="pollution.warning"/></td>
       			    <td><img alt="Red" src="${resource(dir:'images/icons',file:'red.png')}"/></td><td>-><g:message code="pollution.risk"/></td>
       			    </tr>
       			</table></div>
       		</div>
       	</div>
    </body>
</html>
